<template>
  <el-dialog
      destroy-on-close
      :model-value="modelValue"
      :class="styles['dialog']"
      width="35%"
      center
      title="填写卡牌回寄信息"
      @close="close"
  >
    <p class="ato-sub-title">回寄地址信息：</p>
    <ul :class="styles['address-info']">
      <li v-for="item in addressInfo" :key="item.label">
        <span>{{ item.label }}: </span>
        <span>{{ item.value || '-' }}</span>
      </li>
    </ul>
    <p class="ato-sub-title ato-mt-12">回寄卡牌UID：</p>
    <ul :class="styles['card-uid']">
      <li v-for="cardId in state.cardIds" :key="cardId">{{ cardId }}</li>
    </ul>
    <p class="ato-sub-title ato-mt-12 ato-mb-18">请填写卡牌回寄的物流信息：</p>
    <el-form inline :model="logisticsForm" :rules="rules" :class="styles['logistics-form']" ref="formRef">
      <el-form-item label="物流公司:" prop="company">
        <el-input v-model="logisticsForm.company" placeholder="请输入物流公司" clearable style="width: 320px"/>
      </el-form-item>
      <el-form-item label="物流单号:" prop="trackingNo">
        <el-input v-model="logisticsForm.trackingNo" placeholder="请输入物流单号" clearable style="width: 320px"/>
      </el-form-item>
      <div class="ato-flex-center">
        <el-button type="primary" size="large" class="ato-w160" @click="confirm">提交回寄信息</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script setup name="WriteCardLogisticsDialog">
import {computed, reactive, ref} from 'vue'
import {cardReturnApi} from '@/service/card'
import {ElMessage} from 'element-plus'


const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  state: {
    type: Object,
    default: () => ({})
  }
})
const emit = defineEmits(['update:modelValue'])

const formRef = ref(null)

// 地址信息
const addressInfo = computed(() => {
  const {sendPerson, sendAddress, sendPhone} = props.state
  return [
    { label: '寄件人', value: sendPerson },
    { label: '寄件人电话', value: sendPhone },
    { label: '寄件人地址', value: sendAddress }
  ]
})

// 物流表单
const logisticsForm = reactive({
  company: '',
  trackingNo: ''
})
// 表单校验
const rules = {
  company: [{ required: true, trigger: 'blur', message: '物流公司必须填写' }],
  trackingNo: [{ required: true, trigger: 'blur', message: '物流单号必须填写' }]
}

// 提交按钮
function confirm () {
  formRef.value.validate((valid) => {
    if (valid) {
      submitReturnInfo()
    }
  })
}

// 提交回寄信息
async function submitReturnInfo () {
  const {cardIds, orderNo, sendPerson, sendAddress, sendPhone} = props.state
  const res = await cardReturnApi({
    logisticsCompany: logisticsForm.company,
    trackingNo: logisticsForm.trackingNo,
    cardIds,
    orderNo,
    sendPerson,
    sendAddress,
    sendPhone
  })
  if (res.code === __code) {
    ElMessage.success('提交回寄信息成功！')
    close()
  }
}

function close () {
  emit('update:modelValue', false)
}
</script>

<style lang="less" src="./index.less" module="styles"></style>
